<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Add + </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"  charset="utf-8"></script>
    <style type="text/css" media="screen">
        .content_box {
            font-size: 22px;
            padding: 20px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>


<h1> add_test.html </h1>
<h2><a href="/"  target="_blank">首页</a></h2>

<img th:src="@{/img/aaa.jpg}" style="width:123px; height:123px;  "/>

<pre  style="font-size: 24px; ">
let listttt = document.getElementsByClassName("workbench answer-module code-body-hidden js-question-click answer-module");
for (let i = 0; i < listttt.length; i++) {
    listttt[i].style.display = "none";
}
document.getElementsByClassName("flex-row")[0].style.display = "none";document.getElementsByClassName("flex-row")[4].style.display = "none";document.getElementsByClassName("tab-list")[0].style.display=  "none";
</pre>

<br>

<div style="display: flex; ">
    <h2>1.title : </h2>
    <input type="text" style="padding: 6px;  width: 80%;  font-size: 26px; " id="title">
</div>
<br>
<div style="display: flex; ">
    <h2>2.page_url : </h2>
    <input type="text" style="padding: 6px;  width: 60%; font-size: 26px; " id="page_url">
</div>

<br>

<h2>3.难度 level :</h2>
<div style="display: flex; justify-content: space-around;  font-size: 30px; ">
    <div style="border: 1px solid red; padding: 12px;">
        <input type="radio" id="a0" name="aaa" value="0"/>
        <label for="a0">0</label>
    </div>

    <div style="border: 1px solid red; padding: 12px;">
        <input type="radio" id="a100" name="aaa" value="100"/>
        <label for="a100">100</label>
    </div>

    <div style="border: 1px solid red; padding: 12px;">
        <input type="radio" id="a200" name="aaa" value="200"/>
        <label for="a200">200</label>
    </div>

    <div style="border: 1px solid red; padding: 12px;">
        <input type="radio" id="a300" name="aaa" value="300"/>
        <label for="a300">300</label>
    </div>

    <div style="border: 1px solid red; padding: 12px;">
        <input type="radio" id="a400" name="aaa" value="400"/>
        <label for="a400">400</label>
    </div>

    <div style="border: 1px solid red; padding: 12px;">
        <input type="radio" id="a500" name="aaa" value="500"/>
        <label for="a400">500</label>
    </div>

</div>

<br>

<style>
    #imageContainer img{
        width: 300px;
    }
</style>
<h2>4.图片/截图:</h2>
<div id="imageContainer"  style="  width: 95%; "></div>
<input type="file" id="fileInput" style="font-size: 32px;" name="uploadFiles" value="请选择文件" multiple>
<button onclick="getFile()" style="font-size: 24px;">getFile</button>



<br><br>
<h2>5.描述 describe : </h2>
<div class="content_box" id="describe" contentEditable>111111111111111111111111</div>

<br><br>
<h2>6.测试用的 SQL : </h2>
<textarea id="test_sql"      style="font-size: 28px; font-weight: bolder; width: 100%; height: 120px; padding: 10px;"></textarea>

<br><br>
<h2>7.答案 answer : </h2>
<div th:id="answer" class="content_box" id="answer" contentEditable></div>

<br><br>
<button onclick="submit__()" style="font-size: 32px; padding: 12px;">提交</button>


<br><br>
<hr>
<h2> 8.id</h2>
<br><br>


<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>


</body>
<script th:inline="javascript">

    var result_null__ = [[${result_null}]];
    console.log(result_null__);

    var textarea = document.querySelector('textarea');
    textarea.addEventListener('input', (e) => {
        textarea.style.height = '100px';
        textarea.style.height = (e.target.scrollHeight + 20) + 'px';
    });


    document.getElementsByClassName('content_box').addEventListener('paste', function (e) {
        onPaste(e)
    });

    function onPaste(event) {
        let e = event || window.event;
        e.preventDefault(); // 阻止默认粘贴
        // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问
        // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据
        let text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
        //清除回车
        // text = text.replace(/\[\d+\]|\n|\r/ig, "")
        document.execCommand("insertText", false, text); // 插入
    }


    // 提交
    function submit__() {
        let title__ = document.getElementById("title").value;
        console.log(title__)
        if(title__.length < 3){alert("title 太短");  return false;  }

        let page_url__ = document.getElementById("page_url").value;
        console.log(page_url__)
        if(page_url__.length < 3){alert("page_url 太短");  return false;  }

        let describe__ = document.getElementById("describe").innerText
        console.log(describe__);
        if(describe__.length < 3){alert("describe 太短");  return false;  }

        let test_sql__ = document.getElementById("test_sql").value
        console.log(test_sql__);
        if(test_sql__.length < 3){alert("test_sql 太短");  return false;  }

        let answer__ = document.getElementById("answer").innerText
        console.log(answer__);
        if(answer__.length < 3){alert("answer 太短");  return false;  }

        // 获取单选项的值
        var radioButtons = document.getElementsByName('aaa');
        var level__;
        for (let i = 0; i < radioButtons.length; i++) {
            if (radioButtons[i].checked) {
                level__ = radioButtons[i].value;
                break;
            }
        }
        console.log(level__);
        if(level__ === undefined){
            alert("level 不能为空...")
            return false
        }

        //  上传图片的逻辑
        const fileInput = document.getElementById('fileInput');
        const imageContainer = document.getElementById('imageContainer');
        imageContainer.innerHTML = ''; // 清空之前的图片

        if (fileInput.files.length === 0) {
            alert('请先选择一个文件');
            return false;
        }

        var formData = new FormData();
        for (let i = 0; i < fileInput.files.length; i++) {
            const file = fileInput.files[i];
            const reader = new FileReader();
            formData.append('uploadFiles', file)   // 将上传的对象保存在 formData 中

            reader.onload = function(e) {
                const img = document.createElement('img');
                let base64_data =  e.target.result; // 图片的 base64 数据
                console.log(base64_data);
                img.src = base64_data;
                imageContainer.appendChild(img);
            }
            reader.readAsDataURL(file);
        }

        
        
        /*
`title`
`page_url`
`level`
`img_urls`
`describe`
`sql`
`answer`

        * */
        // 上传到后台
        let postObj = {
            title:title__,
            page_url:page_url__,
            level:level__,
            describe:describe__,
            sql:test_sql__,
            answer:answer__,
        };
        formData.append('params', JSON.stringify(postObj)); // 将 postObj 转换为 JSON 字符串并添加到 formData 中
        // 上传到后台
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload_ajax_with_text', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                if (xhr.responseText === "insert_success"){
                    location.reload();
                }
                if (xhr.responseText === "false"){
                    alert("  失败 ~ ")
                }
            }
        };
        xhr.send(formData);
        // xhr.send(JSON.stringify(payload));

    }





</script>
</html>